<template>
  <div class="search">
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @clear="getclear"
    >
      <template #action>
        <div @click="onClickButton">搜索</div>
      </template>
    </van-search>
    <!-- 搜索历史 -->
    <div v-if="searchList.length == 0">
      <div class="searchhistory">
        <p style="display: flex; justify-content: space-between">
          <span style="font-weight: bold">搜索历史</span>
          <span><van-icon name="delete" size="23" @click="deleteFn" /></span>
        </p>
        <div
          style="
            padding: 5px;
            width: 100%;
            min-height: 100px;
            display: flex;
            flex-wrap: wrap;
          "
        >
          <div
            style="
              min-width: 10px;
              height: 30px;
              font-size: 12px;
              color: darkgray;
              border: 1px solid;
              text-align: center;
              line-height: 20px;
              border-radius: 20px;
              margin: 0 10px;
              padding: 5px;
              box-sizing: border-box;
              font-weight: bold;
            "
            v-for="item in hotwords"
            :key="item.id"
            @click="hotFn(item.value)"
          >
            {{ item.value }}
          </div>
        </div>
      </div>
      <!-- 为您推荐 -->
      <div class="search-recommend" style="position: relative">
        <img
          src="../../../public/images/hh.png"
          style="position: absolute; top: 40px"
        />
        <p style="display: flex; justify-content: space-between;margin-bottom: 30px;">
          <span style="font-weight: bold">为您推荐</span
          ><span
            ><img
              src="../../../public/images/旋转.png"
              style="width: 15px; height: 15px"
              @click="Refresh"
          /></span>
        </p>
        <div
          class="recommend-list"
          v-for="item in recommenddata"
          :key="item.id"
          @click="godetail(item.id)"
        >
          <img :src="item.imgurl" style="width: 120px; height: 120px" />
          <div>
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索商品列表 -->
    <div
      class="search-data"
      v-show="searchList.length !== 0"
      v-for="item in searchList"
      :key="item.id"
      @click="godetails(item.id)"
    >
      <img :src="item.imgurl" style="width: 110px; height: 110px" />
      <div class="search-data-box">
        <p>{{ item.title }}</p>
        <p>{{ item.desc }}</p>
        <p
          style="
            color: red;
            font-size: 13px;
            margin: 10px 10px;
            font-weight: bold;
          "
        >
          ￥:{{ item.price }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import request from "@/utils/request";
import { showToast } from "vant";
import { showLoadingToast } from "vant";
export default {
  data() {
    return {
      value: "",
      hotwords: [],
      searchList: [],
      // 推荐商品id
      id: 1,
      // 推荐商品列表
      recommenddata: [],
    };
  },
  async created() {
    const result = await request.get("/good/hotwords");
    this.hotwords = result.data.hotwords;
    // 获取推荐商品数据
    const id = Math.floor(Math.random() * 8) + 1;
    const result1 = await request.get(`/good/griddatalist?id=${id}`);
    this.recommenddata = result1.data.griddatalist;
  },
  methods: {
    async searchHotWords() {
      const result = await request.get("/good/hotwords");
      this.hotwords = result.data.hotwords;
    },
    // 搜索
    async onSearch() {
      if (this.value == "") {
        showToast("搜索内容不能为空!");
        return;
      }
      const result = await request.get(`/good/searchwords?words=${this.value}`);
      this.searchList = result.data.searchdata;
      this.searchHotWords();
    },
    // 点击搜索
    async onClickButton() {
      if (this.value == "") {
        showToast("搜索内容不能为空!");
        return;
      }
      const result = await request.get(`/good/searchwords?words=${this.value}`);
      this.searchList = result.data.searchdata;
      // 重新刷新搜索历史
      this.searchHotWords();
    },
    // 删除搜索历史
    async deleteFn() {
      await request.get("/good/deletehotwords");
      this.searchHotWords();
    },
    // 跳转详情页
    godetail(id) {
      router.push({ path: "/details", query: { id: id } });
    },

    // 刷新推荐商品
    async Refresh() {
      this.id++;
      if (this.id >= 8) {
        this.id = 1;
      }
      // 获取推荐商品数据
      const result1 = await request.get(`/good/griddatalist?id=${this.id}`);
      this.recommenddata = result1.data.griddatalist;
    },
    // 点击了清除按钮,重新获取数据
    getclear() {
      this.searchList = [];
    },
    // 跳转详情页
    godetails(id) {
      router.push({ path: "/details", query: { categoryid: id } });
    },

    // 点击搜索历史
    async hotFn(value) {
      this.value = value;
      const result = await request.get(`/good/searchwords?words=${this.value}`);
      this.searchList = result.data.searchdata;
    },
  },
};
</script>

<style lang="scss">
.van-field__control {
  padding-left: 20px;
}
.van-search__action {
  font-weight: bold;
}
.search {
  .searchhistory {
    padding: 15px;
  }
  .search-recommend {
    width: 100%;
    min-height: 200px;
    padding: 15px;
    .recommend-list {
      display: flex;
      margin: 10px auto;
      p:nth-child(1) {
        margin-left: 10px;
        font-family: "甜瓜体";
      }
      @font-face {
        font-family: "甜瓜体";
        src: url("../../../public/aagushihui.ttf");
      }
      p:nth-child(2) {
        margin-left: 10px;
        font-family: "香萃零度黑";
      }
      @font-face {
        font-family: "香萃零度黑";
        src: url("../../../public/xiangcuilingduhei.ttf");
      }
    }
  }
  .search-data {
    padding: 15px;
    display: flex;
    .search-data-box {
      margin-left: 10px;
      p:nth-child(1) {
        margin-left: 10px;
        font-family: "甜瓜体";
      }
      @font-face {
        font-family: "甜瓜体";
        src: url("../../../public/aagushihui.ttf");
      }
      p:nth-child(2) {
        margin-left: 10px;
        font-family: "香萃零度黑";
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 180px;
        font-size: 12px;
      }
      @font-face {
        font-family: "香萃零度黑";
        src: url("../../../public/xiangcuilingduhei.ttf");
      }
    }
  }
}
</style>
